<template>
  <div class="page page-login">
    <div class="box-login fade-in-down">
        <h1 class="title">登录</h1>
        <LoginForm ref="loginForm" />
        <div class="form-group mt-lg">
          <div class="form-wall">
            <button class="btn btn-theme btn-block" type="button" @click="login">提交</button>
          </div>
        </div>
    </div>
</div>
</template>

<script>
/* 登录 */
import LoginForm from './login-form.vue'

export default {
  components: {
    LoginForm
  },

  methods: {
    /**
     * @function 登录
    */
    login () {
      let view = this.$refs.loginForm
      view.login().then(result => {
        if (result) {
          this.$router.push(this.getMicroRoute('/'))
        }
      })
    }
  }
}
</script>

<style lang="less">
@import "@/components/uikit/components/style/precompile/1.1.2/core/less/func";
@import "@/components/uikit/components/style/precompile/1.1.2/theme/less/_setting";
@import "@/components/uikit/library/rooster/libs/style/demo/pc/less/theme/_setting";
.page-login{
    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background: #fff;
}
.box-login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -200px 0 0 -150px;
    height: 400px;
    width: 300px;
    .title {
        margin: 0 0 10px -350px;
        width: 1000px;
        font-size: 32px;
        color: #666;
        text-align: center;
        font-weight: 400;
    }
    .more {
        text-align: center;
        color: #666;
        a {
            color: #666;
            &:hover {
                color: #188cb3;
            }
        }
    }
    .form-input{
        border: 1px solid #e5e6e7;
        background: #eee;
        .sys-transition(all, 0.3s);
        &:focus,&:hover {
            border-color: @color-theme;
        }
    }
}
.fade-in-down {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fade-in-down;
    animation-name: fade-in-down;
}
@-webkit-keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}
@keyframes fade-in-down {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}
</style>
